<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
		<meta name="renderer" content="webkit">
		<!--国产浏览器高速模式-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电力通信管理系统</title>

		<!-- 公共样式 开始 -->
		<link rel="stylesheet" type="text/css" href="../../css/base.css">
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css">
		<script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
		<script type="text/javascript" src="../../layui/layui.js"></script>
		<!-- 滚动条插件 -->
		<link rel="stylesheet" type="text/css" href="../../css/jquery.mCustomScrollbar.css">
		<script src="../../framework/jquery-ui-1.10.4.min.js"></script>
		<script src="../../framework/jquery.mousewheel.min.js"></script>
		<script src="../../framework/jquery.mCustomScrollbar.min.js"></script>
		<script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
		<!-- 公共样式 结束 -->

	</head>

	<body>
		<div class="cBody">
			<div class="console">
				<div class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="cablesname" id="cablesnameSearch"  placeholder="请输入光缆名称" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
							<input type="text" name="cablesstart" id="cablesstartSearch"  placeholder="请输入光缆起始段" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-input-inline">
							<input type="text" name="cablesdestination" id="cablesdestinationSearch"  placeholder="请输入光缆终止段" autocomplete="off" class="layui-input">
						</div>
                        <button class="layui-btn" id="btnSearch" data-type="reload" lay-filter="formDemo">检索</button>
					</div>
				</div>
			</div>
            <table class="layui-table" id="users" lay-filter="users"></table>
			<script type="text/html" id="bar">
				<a class="layui-btn layui-btn-mini" lay-event="edit" style="line-height: 30px;" id="">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-mini" style="line-height: 30px;" lay-event="del">删除</a>
			</script>
			<script>
                $(document).ready(function(){

                });
				//修改按钮
				var updateFrame = null;

				function updateBut(data){
					layui.use(['layer','form','table'], function() {
						var layer = layui.layer;
						var form=layui.form
						var table=layui.table
						//iframe层-父子操作
						var variety=data.variety;
						form.on("select(variety)",function (data) {
                            variety=data.value
						});

						updateFrame = layer.open({
							title: "光缆信息修改",
							type: 1 ,//Page层类型,
							btn: ['提交', '取消']
							,shadeClose: true,
							area: ['70%', '90%'],
							scrollbar: false,	//默认：true,默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
							maxmin: false,
							content: $("#window")
							,success:function(layero,index){
								$("#id").val(data.id)
								$('#cablesname').val(data.cablesname);
								$('#cablesstart').val(data.cablesstart);
								$('#cablesdestination').val(data.cablesdestination);
							},yes:function(index,layero){
								var body={
									id:$('#id').val(),
									cablesname:$('#cablesname').val(),
									cablesstart:$('#cablesstart').val(),
									cablesdestination:$('#cablesdestination').val(),
                                    variety:variety
								}
								$.ajax({
									type: "post",
									xhrFields: {
										withCredentials: true
									},
									crossDomain: true,
									dataType: "json",
									url: "http://localhost:8888/cable/update",
									contentType: "application/json;charset=UTF-8",//指定消息请求类型
									data: JSON.stringify(body),//将js对象转成json对象
									success: function (data,status,xhr) {
										if (data.code === 0) {
											layer.alert('编辑成功',{icon:1,title:'提示'},function(i){
												layer.close(i);
												layer.close(index);//关闭弹出层
												$("#addForm")[0].reset()//重置form
											})
											table.reload('users',{//重载表格
												page:{
													curr:1
												}
											})
										} else {
											layer.msg(data.msg)
                                            layer.close(index);//关闭弹出层
                                            $("#addForm")[0].reset()//重置form
										}
										return false
									},
									error:function () {
										layer.msg("修改失败，请稍后再试")
									}
								})
							}
						})
					});

				}
				var user=JSON.parse(window.sessionStorage.getItem("user"));
				layui.use(['table', 'layer','element','form'], function() {
					var table=layui.table
                    var form=layui.form
                    table.render({
                        id:"users",//
                        elem: '#users',//指定表格元素
                        url: 'http://localhost:8888/cable/list',  //请求路径
						where:{
							cablesname:$("#cablesnameSearch").val(),
							cablesstart:$("#cablesstartSearch").val(),
							cablesdestination:$("#cablesdestinationSearch").val()
						},
                        cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）
                        //,even: true    //隔行换色
                        ,page: true  //开启分页
                        ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
                        ,limit: 10 //每页默认显示的数量
                        ,method:'post'  //提交方式
						,contentType:"application/json;charset:UTF-8"
                        ,cols: [[
                            {type:'checkbox'}, //开启多选框
                            {
                                field: 'id', //json对应的key
                                title: '光缆ID',   //列名
                                sort: true   // 默认为 false,true为开启排序
                            },
							{
								field: 'cablesname', //json对应的key
								title: '光缆名称',   //列名
								width:160
							},
							{
								field: 'cablesstart', //json对应的key
								title: '起始段',   //列名
								width:100
							},
							{
								field: 'cablesdestination', //json对应的key
								title: '终止段' ,  //列名
								width:100
							},
							{
								field: 'cablessum', //json对应的key
								title: '总芯数' ,  //列名
								width:80
							},
							{
								field: 'cablesused', //json对应的key
								title: '已用芯数' ,  //列名
								width:100
							},
							{
								field: 'cablesfree', //json对应的key
								title: '闲置芯数' ,  //列名
								width:100
							},
							{
								field: 'cablesnumber', //json对应的key
								title: '节点个数' ,  //列名
								width:100
							}
							,{field:'right', title: '操作', width:177,toolbar:"#bar"}
                        ]]
						,done:function(res,curr,count){
							$(".layui-table-box").find("[data-field='id']").css("display","none");
                            var role=window.sessionStorage.getItem("role")
                            if(role*1===2){
                                $(".layui-table-box").find("[data-field='right']").css("display","none");
                            }
						}
                    })
					table.on('tool(users)', function(obj){
						var data = obj.data;
						var ids=[]
						var body={
						    ids:[data.id]
                        }
                        ids.push(data.id)
						if(obj.event === 'edit'){
							console.log(data)
							updateBut(data)
						} else if(obj.event === 'del') {
							layer.confirm('真的删除行么', function (index) {
                                layer.close(index);
                                $.ajax({
                                    type: "get",
                                    xhrFields: {
                                        withCredentials: true
                                    },
                                    crossDomain: true,
                                    dataType: "json",
                                    url: "http://localhost:8888/cable/delete/"+data.id,
                                    contentType: "application/json;charset=UTF-8",//指定消息请求类型
                                    success: function (data,status,xhr) {
                                        if (data.code === 0) {
                                            layer.alert('删除成功',{icon:1,title:'提示'},function(i){
                                                obj.del();
                                                layer.close(i);
                                            })
                                        } else {
                                            layer.msg(data.msg)
                                        }
                                    },
                                    error:function () {
                                        layer.msg("删除失败，请稍后再试")
                                    }
                                })


							});
						}
					});
                    $('#btnSearch').on('click', function(){
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                    var test = layui.$, active = {
                        reload: function(){
                            //执行重载
                            table.reload('users', {
                                page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                                ,where: {
									cablesname:$("#cablesnameSearch").val(),
									cablesstart:$("#cablesstartSearch").val(),
									cablesdestination:$("#cablesdestinationSearch").val()
                                }
                            });
                            $('#cablesnameSearch').val("")
							$('#cablesstartSearch').val("")
							$('#cablesdestinationSearch').val("")
                        }
                    };
				});
			</script>
		</div>
		<div class="cBody" id="window" style="width: 100%;height:100% !important;display: none">
			<form id="addForm" class="layui-form" action="" >
				<input  type="text" id="id" hidden>
				<div class="layui-form-item">
					<label class="layui-form-label">光缆名称</label>
					<div class="layui-input-inline shortInput">
						<input  type="text" id="cablesname" name="cablesname" required lay-verify="cablesname" placeholder="请输入光缆名称" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">起始段</label>
					<div class="layui-input-block ">
						<input  type="text" id="cablesstart" name="cablesstart" required lay-verify="cablesstart" placeholder="请输入光缆起始段" autocomplete="off" class="layui-input">
					</div>

				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">终止段</label>
					<div class="layui-input-block ">
						<input  type="text" id="cablesdestination" name="cablesdestination" required lay-verify="cablesdestination" placeholder="请输入光缆终止段" autocomplete="off" class="layui-input">
					</div>

				</div>

			</form>
		</div>
	</body>

</html>
